<template>
  <div class="live-h5-page">
    <div class="container" id="h5-container">
      <div class="main-content l-left">
        <div class="video-area">
          <div class="video-area-shell">
            <livePlayer
              v-if="isReader"
              :liveState="liveState"
              :baseInfo="baseInfo"
            ></livePlayer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, provide } from "vue";
import { useSelector } from "@xstate/vue";

// 直播间核心逻辑
import {
  LiveRoomSdk,
  LIVE_STATE_CONSTANT,
  NetRequest,
} from "@xiaoe/live-room-common-sdk";
import type { ApiResponse, LiveRoomData } from "@xiaoe/live-room-common-sdk/dist/types/liveRoomSdk/types/netRequest.d.ts";

// 直播间播放区
import livePlayer from "@xiaoe/live-room-components/lib/v3/live-player/index.js";
import "@xiaoe/live-room-components/lib/v3/style.css";

// 直播IM
import xiaoeImSdk from "@xiaoe/xiaoe-im-sdk";

const baseInfo = ref<object | null>(null);
const isReader = ref(false);

// 初始化sdk
const liveRoomSdk = new LiveRoomSdk({
  liveId: "l_67c16e6be4b0694ca06cac0c",
  appId: "appmmmzngny9263",
  sdkAppId: "xop91owbHx29017",
  sdkToken:
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtfYXBwX2lkIjoieG9wOTFvd2JIeDI5MDE3Iiwic2RrX3VzZXJfaWQiOiJ0ZXN0XzMiLCJleHBpcmUiOjE3NDM2NDg2NjAsImlhdCI6MTc0MTA1NjY2MH0.kZKrBn-iPrrM9J4DD4XPFbR4f6_HqHC23L6j4k1WhD8",
  userInfo: {
    userId: "test_3",
    nickname: "333",
    avatar: "",
  },
  mode: "paasSdk",
  xiaoeImSdk,
  debug: false,
  liveRoomSdkReady(status: boolean, data: LiveRoomData | ApiResponse<LiveRoomData>) {
    if (status) {
      baseInfo.value = data;
      isReader.value = true;
    } else {
      const apiData = data as ApiResponse<LiveRoomData>;
      if (apiData.code === 11302) {
        // window.location.href = data.data.redirect_url;
      }
    }
  },
  msgHandleReady: () => {},
});

const liveState = useSelector(liveRoomSdk.liveStateActor, (snapshot: unknown) => {
    // 添加类型保护
    if (
      typeof snapshot === 'object' &&
      snapshot !== null &&
      'value' in snapshot
    ) {
      const safeSnapshot = snapshot as { value: keyof typeof LIVE_STATE_CONSTANT };
      return LIVE_STATE_CONSTANT[safeSnapshot.value];
    }
    // 处理无效情况
    throw new Error('Invalid snapshot format');
});

provide("liveRoomSdk", liveRoomSdk);
provide("globalData", {
  courseId: "",
  mode: "paasSdk",
});

window.$axios = NetRequest;
</script>

<style lang="scss" scoped>
@import "@styles/layoutSize.scss";

.l-left {
  width: 100%;
}
.l-right {
  position: relative;
  width: 320px;
}

.live-h5-page {
  :deep .kl-shop-header {
    border-color: #181a1f;
  }
}

.live-h5-page .shop-header {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  border-radius: 4px;
  background: #ff4747;
  gap: 4px;
  cursor: pointer;
  .header-end-icon {
    width: 16px;
    height: 16px;
  }
  .header-text {
    font-size: 14px;
    color: #ffffff;
  }
}

.live-h5-page {
  :deep .show-confirm-dialog .van-button {
    border-radius: 16px;
  }
}

.container {
  position: relative;
  display: flex;
  width: 100vw;
  height: calc(100vh - 48px);
  min-width: 375px;
  background: #181a1f;
  .main-content {
    background: #000000;
    .video-area {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      .video-area-shell {
        height: 100%;
        width: 100%;
      }
    }
  }
  .secondary-sidebar {
    height: 100%;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
}

// 1024
@media screen and (max-width: $LG) {
  .live-h5-page .shop-header {
    padding: 8px;
    .header-text {
      display: none;
    }
  }

  .container {
    flex-direction: column;
  }
  .l-right {
    width: 100%;
  }
}

// 768
@media screen and (max-width: $MD) {
  .container {
    flex-direction: column;
  }
  .l-right {
    width: 100%;
  }
}

// 375
@media screen and (max-width: $XS) {
  .container {
    flex-direction: column;
  }
  .l-right {
    width: 100%;
  }
}
</style>
